<template>
    <u-navbar
        title="春波小区"
        autoBack
        placeholder
        height="44px"
    >
    </u-navbar>
    <view class="app-container">
        <view class="align-center mb20">
            <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="120rpx" height="120rpx" shape="circle"></up-image>
            <view class="flex1 ml20 align-between" style="padding: 13rpx 0;">
                <view class="justify-between">
                    <view class="font32 weight">春波小区</view>
                    <view class="align-center font22 mb16">
                        <view class="attention align-center">
                            <u-icon name="plus" color="#966BFF" size="12"></u-icon>
                            <text class="ml8">关注</text>
                        </view>
                        <view class="ml20 edit align-center">
                            <u-icon name="edit-pen-fill" color="#5084FF"></u-icon>
                            <text class="ml8">管理员编辑</text>
                        </view>
                    </view>
                </view>
                <view class="justify-between grey font22">
                    <view>滨江区春波路265号</view>
                    <view class="flex-center" @click="handleNavigateTo('/pagesA/residential/residentialDetails')">
                        <text>小区详情</text>
                        <u-icon name="arrow-right" size="16"></u-icon>
                    </view>
                </view>
            </view>
        </view>
        <view class="font26 mb20" style="line-height: 50rpx;">
            小区介绍：距离小区最近的地铁站是西兴地铁口，约643米；距离小区最近的公交站是铁铃关，96路等会经停本站。
        </view>
        <view class="card weight text-center justify-around mb20">
            <view>
                <view>居民</view>
                <view class="purple mt16">15000</view>
            </view>
            <u-line color="#B9B9B9" direction="col" length="50rpx"></u-line>
            <view>
                <view>关注</view>
                <view class="purple mt16">1200</view>
            </view>
            <u-line color="#B9B9B9" direction="col" length="50rpx"></u-line>
            <view>
                <view>动态</view>
                <view class="purple mt16">500</view>
            </view>
            <u-line color="#B9B9B9" direction="col" length="50rpx"></u-line>
            <view>
                <view>群组</view>
                <view class="purple mt16">10</view>
            </view>
            <u-line color="#B9B9B9" direction="col" length="50rpx"></u-line>
            <view>
                <view>商家</view>
                <view class="purple mt16">2560</view>
            </view>
        </view>
        <Dynamic />
    </view>
</template>

<script setup lang="ts">
import { handleNavigateTo } from '@/plugins/uniApp'
import Dynamic from '@/components/Dynamic/index.vue';
</script>

<style lang="scss" scoped>
.attention {
    padding: 8rpx 21rpx;
    background: #efe9ff;
    border-radius: 28rpx;
    color: #966BFF;
}

.edit {
    padding: 8rpx 21rpx;
    background: #e5edff;
    border-radius: 28rpx;
    color: #5084FF;
}

.card {
    padding: 29rpx 0;
    border: 1rpx solid #966BFF;
    border-radius: 16rpx;
}
</style>